<template>
  <view class="teleplay" @click="gotoTeleplayDetail">
    <image :src="item.cover_url" />
    <view class="teleplay-name">{{ item.video_name }}</view>
    <view class="teleplay-desc">{{ item.desc }}</view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {}
  },
  methods: {
    // 跳转播放页
    gotoTeleplayDetail() {
      // 储存剧集信息
      this.$store.commit('teleplay/setEpisodeInfo', this.item)
      uni.navigateTo({
        url: `/pages_sub1/media-player/index`,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.teleplay {
  width: 222rpx;
  height: 408rpx;

  image {
    width: 100%;
    height: 296rpx;
    border-radius: 16rpx;
  }

  &-name {
    width: 100%;
    margin-bottom: 5rpx;
    font-size: 30rpx;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }


  &-desc {
    width: 100%;
    font-size: 24rpx;
    color: #9e9e9e;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .lock {
    width: 64rpx;
    height: 46rpx;
    background-color: pink;
  }
}
</style>
